<template>
  <Layout style="height: 100%" class="main">
    <Header class="header-con">
      <header-bar
        :collapsed="collapsed"
        @on-coll-change="handleCollapsedChange"
      >
        <user :user-avatar="userAvatar" />
        <!-- <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/> -->
        <!-- <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store> -->
        <!-- <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/> -->
      </header-bar>
    </Header>
    <Content class="content-wrapper">
      <!-- <keep-alive :include="cacheList"> -->
      <router-view />
      <!-- </keep-alive> -->
      <ABackTop
        :height="100"
        :bottom="80"
        :right="50"
        container=".content-wrapper"
      ></ABackTop>
    </Content>
  </Layout>
</template>

<script>
import HeaderBar from "./components/header-bar";
import User from "./components/user";
import ABackTop from "./components/a-back-top";
export default {
  name: "MainOnlyHeader",
  components: {
    HeaderBar,
    User,
    ABackTop,
  },
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    handleCollapsedChange(state) {
      this.collapsed = state;
    },
  },
  computed: {
    userAvatar() {
      return this.$store.state.user.avatarImgPath;
    },
    menuList() {
      return this.$store.getters.menuList;
    },
    local() {
      return this.$store.state.app.local;
    },
  },
};
</script>

<style>
</style>